<template>
  <div id='studentList'>
    <comTable
      :column="column"
      :tableData="tableData"
      :search="true"
      @handleSearch="handleSearch"
      :placeholder="'请输入学号'"
      :add="'添加学生信息'"
      @handleAdd="handleAdd"
      :pageSize="pageSize"
      :pageSizes="pageSizes"
      :currentPage="currentPage"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :selection="true"
      @selection-change="handleSelectionChange"
    >
      <template v-slot:slot_a="scope">
        <router-link :to="`/student/${scope.row.sno}`">
          <a href="javascript:;">查看课程</a>
        </router-link>
      </template>
      <template v-slot:slot_operate="scope">
        <div style="width:180px">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="editStudent(scope.row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="delStudent(scope.row)"
          ></el-button>
        </div>
      </template>
    </comTable>

    <!-- 显示框 -->
    <sdialog @click="updateStudent">
      <el-form
        :inline="true"
        :model="studentForm"
        ref="studentForm"
        :rules="rules"
        status-icon
        class="demo-form-inline"
        label-position="right"
        label-width="80px"
      >
        <el-form-item
          label="名称"
          prop="sname"
        >
          <el-input v-model="studentForm.sname"></el-input>
        </el-form-item>
        <el-form-item
          label="性别"
          prop="ssex"
        >
          <el-select v-model="studentForm.ssex">
            <el-option
              label="男"
              value="男"
            ></el-option>
            <el-option
              label="女"
              value="女"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="年龄"
          prop="sage"
        >
          <el-input v-model.number="studentForm.sage"></el-input>
        </el-form-item>

        <el-form-item
          label="学院"
          prop="sdepart"
        >
          <el-input v-model="studentForm.sdepart"></el-input>
        </el-form-item>
        <el-form-item
          label="所属系"
          prop="ssubject"
        >
          <el-input v-model="studentForm.ssubject"></el-input>
        </el-form-item>

        <el-form-item
          label="班级"
          prop="sclass"
        >
          <el-input v-model="studentForm.sclass"></el-input>
        </el-form-item>

        <el-form-item
          label="年级"
          prop="sgrade"
        >
          <el-input v-model="studentForm.sgrade"></el-input>
        </el-form-item>
        <el-form-item
          label="入学年份"
          prop="senrollYear"
        >
          <el-input
            v-model="studentForm.senrollYear"
            type="date"
            @input="compGraduaYear"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="毕业年份"
          prop="sgraduaYear"
        >
          <el-input
            v-model="studentForm.sgraduaYear"
            type="date"
            disabled
          ></el-input>
        </el-form-item>
      </el-form>
    </sdialog>
  </div>
</template>

<script>
import comTable from "@/components/common/comTable.vue"
import sdialog from "@/components/dialog/TeaDialog.vue"
import { confirm } from "@/util/confirm"
import { getStudentPage, delStudent, searchStudent, editStudent, addStudent } from "@/api/student"

export default {
  name: 'studentList',
  components: { comTable, sdialog },
  data() {
    return {
      column: [
        { label: '学号', prop: 'sno', sortable: true },
        { label: '姓名', prop: 'sname' },
        { label: '性别', prop: 'ssex', sortable: true },
        { label: '年龄', prop: 'sage', },
        { label: '学院', prop: 'sdepart', },
        { label: '系', prop: 'ssubject', },
        { label: '班级', prop: 'sclass', },
        { label: '年级', prop: 'sgrade', },
        { label: '入学年份', prop: 'senrollYear', },
        { label: '毕业年份', prop: 'sgraduaYear' },
        { label: '课程', prop: 'checkCourse', type: 'slot', slot_name: "slot_a" },
        { label: '操作', prop: 'operate', type: 'slot', slot_name: "slot_operate" },
      ],
      tableData: [],
      pageSize: 8,
      pageSizes: [8, 16, 24, 32],
      currentPage: 1,
      total: 0,
      studentForm: {},
      rules: {
        sname: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        ssex: [
          { required: true, message: '请选择性别', trigger: 'blur' },
        ],
        sage: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
        ],
        sdepart: [
          { required: true, message: '请输入学院', trigger: 'blur' },
        ],
        ssubject: [
          { required: true, message: '请输入所属系', trigger: 'blur' },
        ],
        sclass: [
          { required: true, message: '请输入班级', trigger: 'blur' },
        ],
        sgrade: [
          { required: true, message: '请输入年级', trigger: 'blur' },
        ],
        senrollYear: [
          { required: true, message: '请选择入学年份', trigger: 'blur' },
        ],
        sgraduaYear: [
          { required: true, message: '请输入所属系', trigger: 'blur' },
        ],
      },
      ref: null
    }
  },
  created() {
    this.GetStudentPage()
  },
  methods: {
    GetStudentPage() {
      getStudentPage(this.currentPage, this.pageSize).then(res => {
        if (res.data.code == 100) {
          // console.log(res);
          this.tableData = res.data.data.page.list
          this.total = res.data.data.page.total
        }
      })
    },
    // 显示修改
    editStudent(row) {
      // console.log(row);
      this.$bus.$emit('visibleDialog', '修改学生信息')
      // // 清楚数据
      this.$nextTick(() => {
        this.$refs['studentForm'].clearValidate()
      })
      // // 复制一份数据显示
      this.studentForm = JSON.parse(JSON.stringify(row))
    },
    // 显示添加
    handleAdd() {
      this.$bus.$emit('visibleDialog', '添加学生信息')
      // // 清楚数据
      this.$nextTick(() => {
        this.$refs['studentForm'].clearValidate()
      })
      // addTeacher
      this.studentForm = {}
      this.studentForm.ssex = '男'
    },
    // 计算毕业时间
    compGraduaYear() {
      let year = this.studentForm.senrollYear.split('-')[0]
      this.studentForm.sgraduaYear = year - 0 + 4 + '-06-01'
    },
    // 更改| 添加
    updateStudent(title) {
      this.$refs['studentForm'].validate(valid => {
        if (valid) {
          // 判断是增加还是修改
          if (title == "修改学生信息") {
            // console.log(this.studentForm);
            editStudent(this.studentForm).then(res => {
              // console.log(res);
              if (res.data.code == 100) {
                // 刷新数据
                this.GetStudentPage()
                this.$message.success('更改成功')
                // 关闭
                this.$bus.$emit('visibleDialog', '', false)
              } else {
                // 关闭
                this.$message.error('更改失败')
                this.$bus.$emit('visibleDialog', '', false)
              }
            })
          } else {
            // 添加
            addStudent(this.studentForm).then(res => {
              if (res.data.code == 100) {
                // 刷新数据
                this.GetStudentPage()
                this.$message.success('添加成功')
                // 关闭
                this.$bus.$emit('visibleDialog', '', false)
              } else {
                // 关闭
                this.$message.error('添加失败')
                this.$bus.$emit('visibleDialog', '', false)
              }
            })
          }
        }
      })
    },
    // 查
    handleSearch(input) {
      if (input == '') {
        return this.GetStudentPage()
      }
      searchStudent(input).then(res => {
        // console.log(res);
        if (res.data.code == 100) {
          this.tableData = [res.data.data.student]
          this.total = 1
        } else {
          this.tableData = []
          this.total = 0
        }
        this.currentPage = 1
      })

    },
    // 删除
    delStudent(row) {
      confirm(this, function () {
        delStudent(row.sno).then(res => {
          // console.log("del", res);
          if (res.data.code == 100) {
            this.$message.success("删除成功")
            // 刷新
            this.GetStudentPage()
          } else {
            this.$message.error("删除失败")
          }
        })
      }.bind(this))
    },
    // 页面大小
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
      this.GetStudentPage()
    },
    // 页码
    handleCurrentChange(currentPage) {
      // 切换页码
      this.currentPage = currentPage
      this.GetStudentPage()
    },
    // 全选
    handleSelectionChange(selectedList) {
      console.log(selectedList);
    }
  }
};
</script>
<style scoped>
</style>
